<div class="row" ng-if="!$ctrl.model">
    <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<div ng-if="$ctrl.model && $ctrl.column && !$ctrl.column.isSelect" ng-init="$ctrl.initData()" class="mb-3 row">
    <div class="col-2">
        <h6 class="control-label m-0 text-primary" ng-bind="$ctrl.translate($ctrl.column.title)"></h6>
        <div>
            <small class="text-muted">
                {{$ctrl.translate($ctrl.column.name)}}: {{$ctrl.translate($ctrl.column.dataType)}}
            </small>
        </div>
    </div>
    <div ng-switch="$ctrl.column.dataType.toLowerCase()" class="col-10">
        <div class="text-muted" ng-switch-default>
            <!--text-->
            <input class="form-control {{$ctrl.inputClass}}" type="text" ng-model="$ctrl.model.obj[$ctrl.column.name]"
                placeholder="{{$ctrl.translate($ctrl.column.title)}}" />
        </div>
        <div class="text-muted" ng-switch-when="datetime">
            <!--datetime-->
            <input class="form-control {{$ctrl.inputClass}}" type="datetime-local" ng-model="$ctrl.obj"
                ng-change="$ctrl.updateValue()" placeholder="{{$ctrl.translate($ctrl.column.title)}}" />
        </div>
        <div class="text-muted" ng-switch-when="date">
            <!--date-->
            <input class="form-control {{$ctrl.inputClass}}" type="date" ng-model="$ctrl.obj"
                ng-change="$ctrl.updateValue()" placeholder="{{$ctrl.translate($ctrl.column.title)}}" />
        </div>
        <div class="text-muted" ng-switch-when="time">
            <!--time-->
            <input class="form-control {{$ctrl.inputClass}}" type="time" ng-model="$ctrl.obj"
                ng-change="$ctrl.updateValue()" placeholder="{{$ctrl.translate($ctrl.column.title)}}" />
        </div>
        <div class="text-muted" ng-switch-when="phonenumber">
            <!--phonenumber-->
            <input class="form-control {{$ctrl.inputClass}}" type="tel" ng-model="$ctrl.model.obj[$ctrl.column.name]"
                placeholder="{{$ctrl.translate($ctrl.column.title)}}" />
        </div>
        <div ng-switch-when="integer|double|currency">
            <!-- Number -->
            <input class="form-control {{$ctrl.inputClass}}" type="number" ng-model="$ctrl.model.obj[$ctrl.column.name]"
                placeholder="{{$ctrl.title}}" />
            <label class="control-label" ng-bind="$ctrl.model.obj[$ctrl.column.name] | currency:''"></label>
        </div>
        <div ng-switch-when="double">
            <!-- Number -->
            <input class="form-control {{$ctrl.inputClass}}" type="number" ng-model="$ctrl.model.obj[$ctrl.column.name]"
                placeholder="{{$ctrl.title}}" />
            <label class="control-label" ng-bind="$ctrl.model.obj[$ctrl.column.name] | currency:''"></label>
        </div>
        <div ng-switch-when="currency">
            <!-- Number -->
            <input class="form-control {{$ctrl.inputClass}}" type="number" ng-model="$ctrl.model.obj[$ctrl.column.name]"
                placeholder="{{$ctrl.title}}" />
            <label class="control-label" ng-bind="$ctrl.model.obj[$ctrl.column.name] | currency:''"></label>
        </div>
        <div class="text-muted" ng-switch-when="html">
            <!--Html-->
            <!-- <quill-editor content="$ctrl.model.obj[$ctrl.column.name]"></quill-editor> -->
            <trumbowyg ng-model="$ctrl.model.obj[$ctrl.column.name]"></trumbowyg>
        </div>
        <div class="text-muted" ng-switch-when="multilinetext">
            <!--TextArea-->
            <textarea class="form-control {{$ctrl.inputClass}}" rows="5" ng-model="$ctrl.model.obj[$ctrl.column.name]"
                placeholder="{{$ctrl.translate($ctrl.column.title)}}"></textarea>
        </div>
        <div class="text-muted" ng-switch-when="emailaddress">
            <!--Email-->
            <input class="form-control {{$ctrl.inputClass}}" type="email" ng-model="$ctrl.model.obj[$ctrl.column.name]"
                placeholder="{{$ctrl.translate($ctrl.column.title)}}" />
        </div>
        <div class="text-muted" ng-switch-when="password">
            <!--Password-->
            <input class="form-control {{$ctrl.inputClass}}" type="password"
                ng-model="$ctrl.model.obj[$ctrl.column.name]" placeholder="{{$ctrl.translate($ctrl.column.title)}}" />
        </div>
        <div class="text-muted" ng-switch-when="imageurl">
            <!--ImageUrl-->
            <input placeholder="{{$ctrl.translate($ctrl.column.title)}}" class="form-control {{$ctrl.inputClass}}"
                type="url" ng-model="$ctrl.model.obj[$ctrl.column.name]"
                placeholder="{{$ctrl.translate($ctrl.column.title)}}" />
        </div>
        <div class="text-muted col-6 p-0" ng-switch-when="upload">
            <!--upload-->
            <media-file-upload header="'Media Upload'" type="'Medias'" folder="'Medias'" auto="'true'"
                upload-options="$ctrl.column.columnConfigurations.upload" src-url="$ctrl.model.obj[$ctrl.column.name]"
                src="$ctrl.model.obj[$ctrl.column.name]" media-file="$ctrl.mediaFile">
            </media-file-upload>
        </div>
        <div class="text-muted" ng-switch-when="color">
            <!--Color-->
            <input class="form-control col-6 {{$ctrl.inputClass}}" type="color"
                value="{{$ctrl.model.obj[$ctrl.column.name]}}" ng-model="$ctrl.model.obj[$ctrl.column.name]"
                placeholder="{{$ctrl.translate($ctrl.column.title)}}" />
            <input class="form-control  col-6 {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.model.obj[$ctrl.column.name]" placeholder="{{$ctrl.translate($ctrl.column.title)}}" />
        </div>
        <div class="text-muted" ng-switch-when="boolean">
            <!--Boolean-->
            <div class="form-check">
                <input class="form-check-input {{$ctrl.inputClass}}" type="checkbox"
                    placeholder="{{$ctrl.translate($ctrl.column.title)}}"
                    ng-model="$ctrl.model.obj[$ctrl.column.name]" />
                <lable ng-bind="$ctrl.model.obj[$ctrl.column.name]" class="form-check-label"></label>
            </div>
        </div>
        <div class="text-muted" ng-switch-when="icon">
            <mix-select-icons prefix="'fab'" options="$ctrl.icons" data="$ctrl.model.obj[$ctrl.column.name]">
            </mix-select-icons>
        </div>
        <div class="text-muted" ng-switch-when="videoyoutube">
            <youtube-editor code="$ctrl.model.obj[$ctrl.column.name]"></youtube-editor>
        </div>
        <div class="text-muted" ng-switch-when="tuieditor">
            <tui-editor content="$ctrl.model.obj[$ctrl.column.name]"></tui-editor>
        </div>
        <div class="text-muted" ng-switch-when="reference">
            <!-- Referrence -->
            <div class="alert alert-warning" role="alert" ng-if="!$ctrl.parentId">
                <i class="fas fa-exclamation-triangle me-3"></i> Please save the current
                item to initialization a parent ID before input it child's data!
            </div>
            <div class="row" ng-if="$ctrl.parentId">                
                <div class="col-md-12">
                    <mix-database-nav-values mix-database-id="$ctrl.column.referenceId" parent-id="$ctrl.model.id"
                        parent-type="'Set'" create-url="$ctrl.createUrl" update-url="$ctrl.updateUrl"
                        back-url="$ctrl.backUrl"
                        on-update="$ctrl.updateRefData(data)" on-delete="$ctrl.removeRefData(data)">
                    </mix-database-nav-values>
                </div>
            </div>
        </div>
        <div class="text-muted" ng-switch-when="qrcode">
            <!--Text-->
            <qr-code model="$ctrl.model.obj[$ctrl.column.name]"></qr-code>
        </div>
        <div class="text-muted" ng-switch-when="json">
            <!--Text-->
            <monaco-editor content="$ctrl.model.obj[$ctrl.column.name] | json"
                update-content="$ctrl.updateJsonContent(content)" ext="'.json'">
            </monaco-editor>
        </div>
        <div class="text-muted" ng-switch-when="tag">
            <!--Text-->
            <tags-input ng-model="$ctrl.model.obj[$ctrl.column.name]">
            </tags-input>
        </div>
    </div>
</div>
<!-- TODO: Only allow stringValue -->
<div ng-if="$ctrl.model && $ctrl.column.isSelect" ng-init="$ctrl.initData()" class="mb-3 row">
    <div class="col-2">
        <h6 class="control-label" ng-bind="$ctrl.translate($ctrl.column.title)"></h6>
    </div>
    <div class="col-10">
        <select ng-if="$ctrl.column.dataType!='icon'" class="form-select form-control"
            ng-model="$ctrl.model.obj[$ctrl.column.name]">
            <option ng-repeat="item in $ctrl.options track by $index" ng-value="item.value">
                {{item.value}}
            </option>
        </select>
    </div>
</div>